<template>
  <div>
    <!--header-->
    <van-nav-bar title="查询列表" left-arrow :fixed="true" :z-index="9" :border="false" style="background-color: #f44;height: 50px;" @click-left="onClickLeft"/>
    <!--商品列表-->
    <GoodsList :data="itemList" :gutterNum="0" :columnNum="2" :showDriver="false" style="margin-top: 51px;margin-bottom: 56px;"/>
  </div>
</template>

<script>
import GoodsList from '@/components/GoodsList'
export default {
  name: 'searchResult',
  components: {
    GoodsList
  },
  data () {
    return {
      itemCategory: '', // 商品类别
      searchVal: '', // 搜索框关键字
      itemList: [] // 查询结果
    }
  },
  methods: {
    /**
     * 根据商品类别和名称查询商品列表
     * itemCategory 商品类别 1:设备 2：配件
     * itemName 商品名称
     * accurate 1:精确查询 0：模糊查询
     */
    getItemListByCategoryAndName (itemName) {
      const self = this
      const param = { itemCategory: self.itemCategory, itemName: itemName, accurate: '0' }
      self.axios.get('api/shop/getItemListByCategoryAndName', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          self.itemList = resp.data.data
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    onClickLeft () {
      this.$router.push({ name: 'category', query: { itemCategory: this.itemCategory } })
    },
    toDetail (item) {
      this.$router.push({ name: 'detail', query: { itemId: item.id } })
    }
  },
  mounted () {
    const self = this
    // 商品类别
    self.itemCategory = self.$route.query.itemCategory
    // 搜索框关键字
    let searchVal = self.$route.query.searchVal
    // 页面初始化加载设备类型
    self.getItemListByCategoryAndName(searchVal)
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: white;
  vertical-align: middle;
}

.van-nav-bar__title {
  color: white;
}
</style>
